<template>
  <div class="my_order">
    <van-cell
      title="我的订单"
      value="全部订单"
      is-link
      @click="onMyOrderList"
    />
    <ul>
      <li
        v-for="(item, index) in my_order"
        :key="index"
        @click="onOrder(index)"
      >
        <van-icon
          :name="item.icon"
          color="#f8af46"
          size="0.64rem"
          class="iconcolor"
        />
        <span>{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'MyOrder',
  data () {
    return {
      my_order: [
        { title: '待付款', icon: 'paid', url: '/topay' },
        { title: '待发货', icon: 'send-gift-o', url: '/toship' },
        { title: '待收货', icon: 'logistics', url: '/toreceive' },
        { title: '待评价', icon: 'comment-o', url: '/toappraise' },
        { title: '退款/售后', icon: 'cash-back-record', url: '/ApplicationOfRefund' }
      ]
    }
  },
  // mounted () {
  //   const liEles = document.querySelectorAll('li')
  //   liEles[4].addEventListener('click', () => {
  //     Toast('功能待开发')
  //   })
  // },
  methods: {
    onMyOrderList () {
      this.$router.push({ path: '/myorderlist' })
    },
    onOrder (index) {
        this.$router.push(this.my_order[index].url)
    }
  }
}
</script>

<style lang="scss" scoped>
.my_order {
  width: 7.1rem;
  height: 2.66rem;
  margin: 0.2rem auto;
  border-radius: 0.2rem;
  background-color: #fff;
  overflow: hidden;
  .van-cell {
    padding: 0.3rem;
    font-size: 0.28rem;
  }
  .van-cell__value {
    font-size: 0.24rem;
  }
  ul {
    display: flex;
    justify-content: space-around;
    border-top: 0.01rem solid #e0e0e0;
    padding-top: 0.3rem;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        padding-top: 0.2rem;
        font-size: 0.24rem;
      }
      .iconcolor {
        background: linear-gradient(to bottom, #fad769 0%, #f6691d 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
